<template>
  <div>
    <el-dialog :title="textMap[addObj.type]" :visible.sync="addObj.dialogFormVisible" :before-close="close">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="200px" style="width: 400px; margin-left:50px;">
        <el-form-item v-for="item of addObj.addList" :key="item.id" :label="item.showName" :prop="item.validateRule">
          <!-- 文本 -->
          <el-input
            v-if="item.editTypeId == 1"
            v-model="temp[item.columnName]"
            :placeholder="item.backendLabel"
            :disabled="item.isRequired == 0 ? false : true"
          />
          <!-- 下拉菜单 -->
          <el-select
            v-if="item.editTypeId == 2"
            v-model="temp[item.columnName]"
            class="filter-item"
            :placeholder="item.backendLabel"
            :disabled="item.isRequired == 0 ? false : true"
          >
            <el-option
              v-for="itemOption in selectOptions(item.dataGroupId)"
              :key="itemOption.id"
              :label="itemOption.name"
              :value="itemOption.value"
              :placeholder="item.backendLabel"
            />
          </el-select>
          <!-- 单选 -->
          <el-radio-group v-if="item.editTypeId == 3" v-model="temp[item.columnName]">
            <el-radio
              v-for="itemOption in selectOptions(item.dataGroupId)"
              :key="itemOption.id"
              :label="itemOption.value"
            >
              {{ itemOption.name }}
            </el-radio>
          </el-radio-group>
          <!-- 复选 -->
          <el-checkbox-group v-if="item.editTypeId == 4" v-model="temp[item.columnName]">
            <el-checkbox
              v-for="itemOption in selectOptions(item.dataGroupId)"
              :key="itemOption.id"
              :label="itemOption.value"
            >
              {{ itemOption.name }}
            </el-checkbox>
          </el-checkbox-group>
          <!-- 图片上传  暂时不做处理 -->
          <!-- 文件上传  暂时不做处理 -->
          <!-- 下拉菜单 （带搜索） -->
          <el-select
            v-if="item.editTypeId == 7"
            v-model="temp[item.columnName]"
            filterable
            :placeholder="item.backendLabel"
            :disabled="item.isRequired == 0 ? false : true"
          >
            <el-option
              v-for="itemOption in selectOptions(item.dataGroupId)"
              :key="itemOption.id"
              :label="itemOption.name"
              :value="itemOption.value"
            />
          </el-select>
          <!-- 外部链接 el-link该版本不支持 -->
          <!-- 日期时间（当前时间，只读） -->
          <el-date-picker
            v-if="item.editTypeId == 9"
            v-model="temp[item.columnName]"
            :type="item.columnTypeIdStr"
            :placeholder="item.backendLabel"
            :readonly="readonly"
          />
          <!-- 日期时间（选择） -->
          <el-date-picker
            v-if="item.editTypeId == 10"
            v-model="temp[item.columnName]"
            :type="item.columnTypeIdStr"
            :placeholder="item.backendLabel"
            :disabled="item.isRequired == 0 ? false : true"
          />
          <!-- 文本区 -->
          <el-input
            v-if="item.editTypeId == 11"
            v-model="temp[item.columnName]"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            :placeholder="item.backendLabel"
          />
          <!-- 富文本区 暂时不做处理 -->
          <!-- 隐藏 -->
          <input v-if="item.editTypeId == 13" v-model="temp[item.columnName]" type="hidden">
          <!-- 密码区 -->
          <el-input
            v-if="item.editTypeId == 14"
            v-model="temp[item.columnName]"
            type="password"
            :placeholder="item.backendLabel"
          />
          <!-- 开关 -->
          <el-switch
            v-if="item.editTypeId == 15"
            v-model="temp[item.columnName]"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <!-- 复合文本框 -->
          <el-input
            v-if="item.editTypeId == 21"
            v-model="temp[item.columnName]"
            :placeholder="item.backendLabel"
            :disabled="item.isRequired == 0 ? false : true"
          >
            <template slot="append">{{ item.editTypeIdStr }}</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="editData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'EditButton',
  props: {
    addObj: Object
  },
  data() {
    return {
      checkGroup: [],
      textMap: {
        update: '修改',
        create: '新增'
      },
      temp: {}, // 子组件总的v-model双向绑定对象
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      },
      selectList: [
        {
          'id': 1,
          'groupNo': 69997,
          'name': '办公设备',
          'nameEn': null,
          'value': 1,
          'defaultFlag': null,
          'isAble': 1,
          'fInfo1': null,
          'fInfo2': null,
          'fInfo3': null,
          'fInfo4': 0,
          'fOrder': 1
        },
        {
          'id': 2,
          'groupNo': 69997,
          'name': '学习资料',
          'nameEn': null,
          'value': 2,
          'defaultFlag': null,
          'isAble': 1,
          'fInfo1': null,
          'fInfo2': null,
          'fInfo3': null,
          'fInfo4': 0,
          'fOrder': 2
        }
      ],
      readonly: true
    }
  },
  computed: {
    // 计算属性传值使用闭包即可
    selectOptions() {
      const _this = this
      return function(groupId) {
        return _this.selectList
      }
    },
    modelBind() {
      return function(columnName) {
        console.info(columnName)
        return 'temp.' + columnName
      }
    }
  },
  watch: {
    'addObj.addList': function() {
      // 监听接口返回list变化
      this.init()
    }
  },
  methods: {
    editData() {
      this.$emit('editBtnValue', this.temp)
    },
    init() {
      const _this = this
      this.addObj.addList.forEach(item => {
        // 复选
        if (item.editTypeId === 4) { // 复选框 默认 数组
          Vue.set(_this.temp, item.columnName, item.defaultValue ? item.defaultValue : [])
        } else if (item.editTypeId === 9) { // 日期时间 默认当前时间
          Vue.set(_this.temp, item.columnName, item.defaultValue ? item.defaultValue : new Date())
        } else if (item.editTypeId === 15) { // 开关 默认 true/false
          Vue.set(_this.temp, item.columnName, item.defaultValue ? item.defaultValue : false)
        } else {
          Vue.set(_this.temp, item.columnName, item.defaultValue ? item.defaultValue : '')
        }
      })
    },
    close() {
      this.init()
      this.addObj.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>

</style>
